<template>
  <el-container >

    <el-main style="height: 100%;width: 100%;">
      <el-row gutter="30" style="height: 100%;width: 100%">
        <el-col :span="6"  style="height: 100%;">
          <div class="panal">
            <el-row style="height: 50%">
              <el-container style="width: 100%;height: 100%;border-bottom: 1px solid rgba(7,118,181,.7) ">
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
                  成本占比分析
                </el-header>
                <pieChart ref="pieChart"></pieChart>
              </el-container>
            </el-row>
            <el-row style="height: 50%">
              <el-container style="width: 100%;height: 100%;">
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
                  成本趋势分析
                </el-header>
                <barLineCharts ref="lineCharts">

                </barLineCharts>
              </el-container>
            </el-row>
          </div>
        </el-col>
        <el-col :span="18"   style="height: 100%;">
          <el-container class="panal">
            <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
              成本详情
            </el-header>
            <el-main>
              <el-row :gutter="40" class="panel-group">

              </el-row>
            </el-main>

          </el-container>
        </el-col>
      </el-row>
    </el-main>

  </el-container>
</template>
<script>
  import { parseTime } from '../../../utils/entfrm'
  import pieChart from '../../dashboard/BiPieChart'
  import lineChart from '../../dashboard/BiLineChart'
  import barLineCharts from '../../dashboard/BiBarLineCharts'
  export default {
    components: {
      pieChart,
      lineChart,
      barLineCharts
    },
    name: 'index',
    data() {
      return {
        currentTime:"",
        intervalId3:"",
        title:"民祥科技BI报表系统",
        data:[
          {
            name:'成本核算',
            description:'主数据的统计数据',
            url:'',
            sysIcon:'http://10.20.3.63:9163/image/image1675128066493.png'
          }
          ,{
            name:'生产日报表',
            description:'提报物资大类的查询',
            url:'materialType',
            sysIcon:'http://10.20.3.63:9163/image/image1675128082697.png'
          },
          {
            name:'物料统计分析',
            description:'物资二维码仓库',
            url:'materialDetail',
            sysIcon:'http://10.20.3.63:9163/image/image1675128077763.png'
          },
          {
            name:'产品库存',
            description:'物资单位名称比如（件，个,kg等）',
            url:'',
            sysIcon:'http://10.20.3.63:9163/image/image1675128072376.png'
          },
          {
            name:'能源统计分析',
            description:'各个系统的主数据库调用记录',
            url:'tdVue',
            sysIcon:'http://10.20.3.63:9163/image/image1675128050660.png'
          },
          {
            name:'实时数据',
            description:'各个系统的主数据库调用记录',
            url:'tdVue',
            sysIcon:'http://10.20.3.63:9163/image/image1675128050660.png'
          }]
      }
    },
    methods:{
      formatTime(date) {
        return parseTime( new Date().getTime() ,'{y}-{m}-{d} ')+ date.toLocaleTimeString();
      },
      updateTime() {
        this.currentTime = this.formatTime(new Date());
      },
      tiaozhuan(data){

        this.$router.push(data);
      },
      firstPage(){
        this.$router.push("/birRepport");
      },
      cbqsLineCharts(){
          let  chartData={
            series:[{
              name: '文件分享统计',
              type: 'bar',
              barWidth:'20%',
              data: [],
            },
              {
                name: '文件分享统计',
                type: 'line',
                data: [],
              }],
            xData:[]
          };
          // response.forEach((item,index)=>{
          //   chartData.xData.push(item.createTime+"月");
          //   chartData.series[0].data.push(item.fileCount);
          //   chartData.series[1].data.push(item.fileCount);
          // })
          // this.$refs.lineCharts.setData(chartData);
      },

      cbfxPieCharts(){
          let  chartData={
            series:[{
              name:'成本分析占比',
              type: 'pie',
              radius: [70, 95],
              center: ['50%', '38%'],
              data:[]

            }],
            lengendData:["原材料","燃料及动力费用","人工费用","检维修费用","其它费用"],
          };
          chartData.series[0].data=[{
            name:"原材料",
            value:15
          },
            {
              name:"燃料及动力费用",
              value:10
            },
            {
              name:"人工费用",
              value:5
            },
            {
              name:"检维修费用",
              value:10
            },
            {
              name:"其它费用",
              value:10
            }
          ];

          this.$refs.pieChart.setData(chartData);

      }
    },
    mounted() {
      this.intervalId3=  setInterval(this.updateTime, 1000);
      this.cbfxPieCharts();
      this.cbqsLineCharts();
    },
    destroyed() {
      clearInterval(this.intervalId3);
    },

  }
</script>

<style scoped>




</style>
